
.overflow-hidden { overflow: hidden; }
.text-overflow-ellipsis { width: 100%; overflow: hidden; text-overflow: ellipsis; }
.opacity50 { opacity: 0.5; }
.opacity70 { opacity: 0.7; }
.round-0-top-left { border-top-left-radius: 0 !important; }
.round-0-top-right { border-top-right-radius: 0 !important; }
.no-pointer-events { pointer-events: none; user-select: none; }

/* position */
.left-top { left: 0; top: 0; }
.left-bottom { left: 0; bottom: 0; }
.right-top { right: 0; top: 0; }
.center-middle { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* colors */
.bg-primary { background-color: #63b9ee !important; }
.bg-info { background-color: #bddcfa !important; }
.bg-danger { background-color: #cc5147 !important; }

/* messages */
.app-message-container { height: 175px; overflow: hidden; overflow-y: auto; }

/* buttons */
.btn { border-radius: 4px; }
.btn:active { position: relative; top: 1px; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.btn:focus,
.btn:active,
.btn:active:focus { border-radius: 6px; }
.btn-secondary { box-shadow: inset 0 1px 0 0 #ffffff, 0 2px 5px rgba(0, 0, 0, 0.1); background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%) #f9f9f9; border: 1px solid #dcdcdc; cursor: pointer; color: #666; text-shadow: 0 1px 0 #fff; }
.btn-secondary.active,
.btn-secondary:hover { background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%) #e9e9e9; }
.btn-secondary.active,
.btn-secondary.active:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active:focus { color: #666666; box-shadow: inset 0 1px 0 0 #ffffff, 0 2px 5px rgba(0, 0, 0, 0.1); border: 1px solid #dcdcdc; }

.btn-primary { box-shadow: inset 0 1px 0 0 #a9d5eb, 0 2px 5px rgba(0, 0, 0, 0.5); background: linear-gradient(to bottom, #63b9ee 5%, #3970a3 100%) #63b9ee; border: 1px solid #6e95c4; cursor: pointer; color: #fff; text-shadow: 0 1px 0 #3867a3; }
.btn-primary:hover { background: linear-gradient(to bottom, #3970a3 5%, #63b9ee 100%) #3970a3; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus { color: #fff; box-shadow: inset 0 1px 0 0 #5f9fc7, 0 2px 5px rgba(0, 0, 0, 0.5); border: 1px solid #6e95c4; }
.btn-primary:focus:not(:active):not(:hover) { box-shadow: inset 0 1px 0 0 #a9d5eb, 0 2px 5px rgba(0, 0, 0, 0.5); }

.btn-info,
.btn-info[disabled] { box-shadow: inset 0 1px 0 0 #fff, 0 2px 5px rgba(0, 0, 0, 0.2); background: linear-gradient(to bottom, #bddcfa 5%, #80b5ea 100%) #bddcfa; border: 1px solid #84bcf3; cursor: pointer; color: #38536b; text-shadow: 0 1px 0 #fff; }
.btn-info:hover { background: linear-gradient(to bottom, #80b5ea 5%, #bddcfa 100%) #80b5ea; }
.btn-info:hover,
.btn-info:focus,
.btn-info:active:focus { color: #38536b; box-shadow: inset 0 1px 0 0 #9dcfe8, 0 2px 5px rgba(0, 0, 0, 0.2); border: 1px solid #84bcf3; }
.btn-info:focus:not(:active):not(:hover) { box-shadow: inset 0 1px 0 0 #fff, 0 2px 5px rgba(0, 0, 0, 0.2); }

.btn-danger { box-shadow: inset 0 1px 0 0 #f5978e, 0 2px 5px rgba(0, 0, 0, 0.5); background: linear-gradient(to bottom, #cc5147 5%, #c62d1f 100%) #f24437; border: 1px solid #d02718; cursor: pointer; color: #fff; text-shadow: 0 1px 0 #b23d35; }
.btn-danger:hover { background: linear-gradient(to bottom, #c62d1f 5%, #cc5147 100%) #c62d1f; }
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active:focus { color: #fff; box-shadow: inset 0 1px 0 0 #d1837b, 0 2px 5px rgba(0, 0, 0, 0.5); border: 1px solid #d02718; }
.btn-danger:focus:not(:active):not(:hover) { box-shadow: inset 0 1px 0 0 #f5978e, 0 2px 5px rgba(0, 0, 0, 0.5); }

/* show-on-hover */
.show-on-hover-parent:hover .show-on-hover.show-on-hover-block { display: block; }
.show-on-hover-parent:hover .show-on-hover.show-on-hover-inline-block { display: inline-block; }
.show-on-hover { opacity: 0; transition: opacity 300ms; pointer-events: none; user-select: none; }
.show-on-hover-bg { background-color: rgba(0, 0, 0, 0.5); }
.show-on-hover-parent:hover .show-on-hover { opacity: 1; pointer-events: all; }

.btn-animation { position: relative; display: inline-block; }
.btn-animation div,
.btn-animation span { display: inline-block; }
.btn-animation-icon { position: absolute; top: -3px; right: 50%; margin-right: -23px; opacity: 0.7; transition: right 300ms, opacity 300ms; }
.btn-animation-label { opacity: 0; margin-left: 5px; transition: opacity 300ms, margin-left 300ms; }
.btn:hover .btn-animation .btn-animation-icon { right: 92%; opacity: 1; }
.btn:hover .btn-animation .btn-animation-label { opacity: 1; margin-left: 35px; }

/* options-panel */
.options-panel { left: 12px; top: 12px; width: calc(50% - 24px); height: calc(100% - 94px); background-color: #e9e9e9; border: 1px solid #348feb; z-index: 100; }
.options-panel-body { width: calc(100% - 100px); height: calc(100% - 160px); overflow: hidden; overflow-y: auto; position: absolute; }
.btn-options-panel { transition: padding 300ms, margin 300ms; }
.btn-options-panel.active { padding-top: 25px; margin-top: -29px; padding-bottom: 20px; background: linear-gradient(to bottom, #e9e9e9 35%, #fff 90%); position: relative; z-index: 100; }
.btn-options-panel.active,
.btn-options-panel.active:focus,
.btn-options-panel.active:active { border: 1px solid #348feb; }
.btn-options-panel.active + .options-panel:before { content: ''; display: block; width: calc(50% - 11px); height: 7px; background-color: #e9e9e9; border-left: 1px solid #348feb; border-right: 1px solid #348feb; position: absolute; bottom: -7px; }
.btn-options-panel-right.active + .options-panel { border-bottom-right-radius: 0; }
.btn-options-panel-left.active + .options-panel { border-bottom-left-radius: 0; }
.btn-options-panel-right.active + .options-panel:before { right: -1px; }
.btn-options-panel-left.active + .options-panel:before { left: -1px; }
.options-panel-backdrop { position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,0.2); }
.options-panel-backdrop.active { width: 100%; height: 100%; }
@media (max-width: 992px) {
    .options-panel { top: 312px; width: calc(100% - 24px); height: 450px; }
}

/* form-radio-button */
.form-radio-button { position: relative; }
.form-radio-button input[type=radio] { position: absolute; visibility: hidden; }
.form-radio-button label { color: #777; display: block; position: relative; font-weight: 300; font-size: 1.35rem; padding: 15px 0 15px 50px; margin: 10px auto; z-index: 9; cursor: pointer; transition: color 400ms; }
.form-radio-button:hover label { color: #000; }
.form-radio-button .check { display: block; position: absolute; border: 5px solid #aaa; border-radius: 50%; height: 35px; width: 35px; top: 15px; left: 0; z-index: 5; transition: border 400ms; }
.form-radio-button:hover .check { border: 5px solid #000; }
.form-radio-button .check::before { content: ''; display: block; position: absolute; background: #348feb; border-radius: 50%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transform: scale(0); transition: background 300ms, transform 400ms; }
.form-radio-button input[type=radio]:checked ~ .check { border: 5px solid #348feb; }
.form-radio-button input[type=radio]:checked ~ .check::before { transform: scale(1); }
.form-radio-button input[type=radio]:checked ~ label { color: #348feb; }

/* dropdown-menu */
.dropdown-item { padding: 0.5rem 0.8rem; transition: background-color 300ms; }
.dropdown-item.active { color: #000; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, #d9d9d9 100%) #ededed; }
.dropdown-item:hover { color: #000; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, #d9d9d9 100%) #ededed; }
.dropdown-menu { background: #ededed; box-shadow: 0 0 8px rgba(0,0,0,0.2); }

/* screen-separator */
.screen-separator { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #fff; }
@media (max-width: 992px) {
    .screen-separator { width: 100%; height: 1px; top: auto; bottom: 0; }
}
